<!DOCTYPE html>
<html>
<head>
    <title>贪吃蛇大作战</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>

    <script>
        // 贪吃蛇相关常量
        const SNAKE_SIZE = 20;
        const SNAKE_SPEED = 10;

        // 颜色常量
        const BLACK = "black";
        const GREEN = "green";
        const RED = "red";

        // 获取canvas元素和上下文
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

        // 贪吃蛇类
        class Snake {
            constructor() {
                this.segments = [];
                this.createSnake();
                this.head = this.segments[0];
            }

            createSnake() {
                let x = 0;
                for (let i = 0; i < 3; i++) {
                    let segment = {
                        x: x,
                        y: 0
                    };
                    this.segments.push(segment);
                    x -= SNAKE_SIZE;
                }
            }

            move() {
                const head = {
                    x: this.head.x + SNAKE_SIZE,
                    y: this.head.y
                };
                this.segments.unshift(head);
                this.segments.pop();
            }

            changeDirection(direction) {
                if (direction === "up" && this.head.y !== SNAKE_SIZE) {
                    this.head.y = -SNAKE_SIZE;
                    this.head.x = 0;
                } else if (direction === "down" && this.head.y !== -SNAKE_SIZE) {
                    this.head.y = SNAKE_SIZE;
                    this.head.x = 0;
                } else if (direction === "left" && this.head.x !== SNAKE_SIZE) {
                    this.head.x = -SNAKE_SIZE;
                    this.head.y = 0;
                } else if (direction === "right" && this.head.x !== -SNAKE_SIZE) {
                    this.head.x = SNAKE_SIZE;
                    this.head.y = 0;
                }
            }
        }

        // 食物类
        class Food {
            constructor() {
                this.x = 0;
                this.y = 100;
            }

            move() {
                this.x = Math.floor(Math.random() * (canvas.width / SNAKE_SIZE)) * SNAKE_SIZE;
                this.y = Math.floor(Math.random() * (canvas.height / SNAKE_SIZE)) * SNAKE_SIZE;
            }
        }

        // 创建贪吃蛇和食物对象
        const snake = new Snake();
        const food = new Food();

        // 监听键盘事件
        document.addEventListener("keydown", (event) => {
            const key = event.key;
            if (key === "W" && snake.head.y !== SNAKE_SIZE) {
                snake.changeDirection("up");
            } else if (key === "S" && snake.head.y !== -SNAKE_SIZE) {
                snake.changeDirection("down");
            } else if (key === "A" && snake.head.x !== SNAKE_SIZE) {
                snake.changeDirection("left");
            } else if (key === "D" && snake.head.x !== -SNAKE_SIZE) {
                snake.changeDirection("right");
            }
        });

        // 游戏循环
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            snake.move();

            if (snake.head.x === food.x && snake.head.y === food.y) {
                food.move();
                const tail = {
                    x: snake.segments[snake.segments.length - 1].x,
                    y: snake.segments[snake.segments.length - 1].y
                };
                snake.segments.push(tail);
            }

            // 绘制贪吃蛇
            ctx.fillStyle = GREEN;
            snake.segments.forEach(segment => {
                ctx.fillRect(segment.x, segment.y, SNAKE_SIZE, SNAKE_SIZE);
            });

            // 绘制食物
            ctx.fillStyle = RED;
            ctx.fillRect(food.x, food.y, SNAKE_SIZE, SNAKE_SIZE);

            // 判断游戏结束条件
            if (
                snake.head.x < 0 || snake.head.x >= canvas.width ||
                snake.head.y < 0 || snake.head.y >= canvas.height ||
                checkCollision()
            ) {
                clearInterval(gameInterval);
                alert("游戏结束");
            }
        }

        // 检查贪吃蛇是否撞到自己的身体
        function checkCollision() {
            for (let i = 1; i < snake.segments.length; i++) {
                if (snake.head.x === snake.segments[i].x && snake.head.y === snake.segments[i].y) {
                    return true;
                }
            }
            return false;
        }

        // 开始游戏循环
        const gameInterval = setInterval(gameLoop, 1000 / SNAKE_SPEED);
    </script>
</body>
</html>